<template>
  <div>
    <mt-header title="请先登录">
      <mt-button slot="right">注册</mt-button>
    </mt-header>
    <!-- 选项 -->
    <mt-navbar v-model="selected">
      <mt-tab-item id="1">手机验证登录</mt-tab-item>
      <mt-tab-item id="2">账号登录</mt-tab-item>
    </mt-navbar>
    <!-- tab-container -->
    <mt-tab-container v-model="selected">
      <mt-tab-container-item id="1">
        <div class="loginbox">
          <input type="text" class="phone" placeholder="请输入手机号码" />
          <mt-button type="primary">获取验证码</mt-button>
        </div>
        <div class="loginbox">
          <input type="password" placeholder="请输入密码" />
        </div>
        <p class="">
            未注册过的手机号码将自动注册
        </p>
          <div>
          <mt-button type="primary" class="primary">登录</mt-button>
        </div>
        <div class="shuoming">
          说明：注册/登录说明已同意 <a>《协议》</a>
        </div>
      </mt-tab-container-item>
      <mt-tab-container-item id="2"> </mt-tab-container-item>
    </mt-tab-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selected: "",
    };
  },
};
</script>

<style scoped>
.mint-header {
  background: #e9e9e9;
}
.loginbox {
  width: 90%;
  margin-top: 10px;
  border-bottom: 1px solid #999;
}
.loginbox input {
  height: 40px;
  line-height: 40px;
  width: 60%;
  border: none;
}
.mint-tab-container-item {
  padding:10px 20px 0 20px;
 /* height: 180px; */
  text-align: left;
  line-height: 30px;
}
.mint-tab-container-item p{
  width: 323px;
  line-height: 50px;
  border-bottom: 1px solid #999;
}
 .primary{
    width: 90%;
}
.shuoming{
  margin-left: 35px;
  margin-top: 20px;
}
</style>